<template>
    <div class="mine_parent">
        <div class="avatar">
            <div class="username">
         <div class="left">
            <van-image
  round
  width="3rem"
  height="3rem"
  src="https://inews.gtimg.com/news_bt/OpZbt8H49-4Q6ee2dQLiAXo9rTY80QTCichv9rN9zrn4QAA/641"
/>

         </div>
         <div class="right" style="margin-left: 10px;">
            <div style="font-weight: bold;font-size: 14px;font-family: '楷体';">9zbing</div>
            <div><van-button size="small" style="height: 20px;" plain round type="default">Lv9.0</van-button>
            </div>
         </div>
            </div>
            <div class="icon">
                <van-icon name="arrow" size="20" />
            </div>
        </div>
<div class="grid" style="margin-top: 20px;">
<van-grid square :border="false">
  <van-grid-item icon-color="red" v-for="item in gridlist" :key="item.id" :icon="item.icon" :text="item.text" />
</van-grid>

</div>
<div class="music">
    <div class="left" style="display: flex;">
        <div class="icon">
            <van-icon name="like" color="#fff"/>
        </div>
        <div class="text" style="margin-left: 10px;">
            <div style="font-weight: bold;margin-bottom: 6px;">我喜欢的音乐</div>
            <div style="color: #736d6d;font-size: 12px;">10086首</div>
        </div>
    </div>
    <div class="right">
        <van-button size="mini" icon="fire" plain round type="default">心动模式</van-button>
    </div>
</div>

<div class="card" style="margin-top: 10px;">
<van-tabs v-model:active="active"  animated color="red" background="#f4f4f4">
  <van-tab  title="创建歌单" name="a">
  <div class="tab">
    <div class="top">
        <div class="left" style="font-size: 12px;color: #736d6d;">创建歌单(3个)</div>
        <div class="right">
            <van-icon name="plus" color="#736d6d" size="18"></van-icon>
            <van-icon name="bars" color="#736d6d" size="18" style="margin-left: 5px;"></van-icon>
        </div>

    </div>
    <div class="bottom" v-for="item in playList" :key="item.id">
<div class="left">
   
    <img width="45px" height="45px" :src="item.url" alt="">
</div>

<div class="right">
    <div style="font-weight: bold;">{{ item.name }}</div>
    <!-- meixiewan -->
    <div style="font-size: 12px;color: #736d6d;margin: top 3px;;">{{ item.num }}首</div>
</div>
    </div>
  </div>
  </van-tab>
  <van-tab  title="收藏歌单" name="b">

    <div class="tab">
 <div class="top">
        <div class="left" style="font-size: 12px;color: #736d6d;">收藏歌单(3个)</div>
        <div class="right">
            <van-icon name="plus" color="#736d6d" size="18"></van-icon>
            <van-icon name="bars" color="#736d6d" size="18" style="margin-left: 5px;"></van-icon>
        </div>

    </div>
<div class="bottom" v-for="item in willList" :key="item.id">
<div class="left">
   
    <img width="45px" height="45px" :src="item.url" alt="">
</div>

<div class="right">
    <div style="font-weight: bold;">{{ item.name }}</div>
    <!-- meixiewan -->
    <div style="font-size: 12px;color: #736d6d;margin: top 3px;;">{{ item.num }}首</div>
</div>
    </div>
    </div>
  </van-tab>
  <van-tab  title="歌单助手" name="c">

    <div class="tab">



<div class="top">
        <div class="left" style="font-size: 12px;color: #736d6d;">功能</div>
        <div class="right">
            <van-icon name="plus" color="#736d6d" size="18"></van-icon>
            <van-icon name="bars" color="#736d6d" size="18" style="margin-left: 5px;"></van-icon>
    </div>
    </div>
<div class="bottom" v-for="item in goodList" :key="item.id">
<div class="left">
   
    <img width="45px" height="45px" :src="item.url" alt="">
</div>

<div class="right">
    <div style="font-weight: bold;">{{ item.name }}</div>
    <!-- meixiewan -->
    <div style="font-size: 12px;color: #736d6d;margin: top 3px;;">{{ item.num }}</div>
</div>
    </div>
    </div>
  </van-tab>
</van-tabs>

</div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const active = ref('a');
const gridlist = ref([
    {id:1,icon:"shop",text:'本地音乐'},
    {id:2,icon:"shop-collect",text:'云盘'},
    {id:3,icon:"goods-collect",text:'已购'},
    {id:4,icon:"play-circle",text:'最近播放'},
    {id:5,icon:"friends",text:'我的关注'},
    {id:6,icon:"star",text:'收藏和赞'},
    {id:7,icon:"volume",text:'我的播客'},
    {id:8,icon:"music",text:'音乐应用'},
]);
const playList = ref([
    {id:1,url:"https://f.sinaimg.cn/sinakd10111/160/w5376h3584/20250220/d450-eb835c744af6dca498acd60da05530b5.png", name:'车载音乐',num:'100'},
    {id:2,url:"https://q0.itc.cn/images01/20241126/7d4fb314698d40de8eebb7b78fbe2d7f.jpeg", name:'助眠音乐',num:'100'},
    {id:3,url:"https://img0.baidu.com/it/u=2011104025,1324635497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name:'轻松纯音乐',num:'100'},
]);
const willList = ref([
    {id:1,url:"https://img2.zol.com.cn/product/21_500x2000/364/ce2iBDU2ImB6Y.jpg", name:'陈奕迅',num:'18'},
    {id:2,url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fsubject%2Fm%2Fpublic%2Fs28331397.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754364667&t=5a6acafccb667b6d70c1e9e39f5e8cca", name:'梁博',num:'7'},
    {id:3,url:"https://ww1.sinaimg.cn/large/771a3ec3gw1f605ncmac8j20j60j6jun.jpg", name:'薛之谦',num:'23'},
]);
const goodList = ref([
    {id:1,url:"https://img0.baidu.com/it/u=921193667,113967043&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", name:'听歌排行',num:'累计听歌4890首'},
    {id:2,url:"https://bpic.51yuansu.com/pic3/cover/01/01/65/58de7644b9dd3_610.jpg?x-oss-process=image/sharpen,100", name:'新建歌单',num:''},
    {id:3,url:"https://img95.699pic.com/xsj/05/rh/co.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast", name:'导入外部歌单',num:'轻松导入其他APP里的歌单'},
]);
</script>
<style class="less">
.mine_parent{
    height: calc(100vh - 32px);
    background-color: whitesmoke;
    padding: 10px;
    .avatar{
        display:flex;
        justify-content: space-between;
        align-items: center;
        .username{
            display:flex;
        }
    }
.grid{
    border-radius: 10px;
    overflow: hidden;
}
.music{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    background-color: white;
    height: 55px;
    border-radius: 5px;
    .icon{
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background-image: url(https://imgessl.kugou.com/stdmusic/20190312/20190312194408344337.jpg);
        background-size: 100% 100%;
        
    }

}
.card{
    background: #fff;
    .tab{
padding: 5px;
.top{
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
    .bottom{
        padding: 10px;
        display: flex;
        .left{
            margin-right: 10px;
            img{
                border-radius: 5px;
            }
        }
    }
    }
}
}
</style>